import {
  computed,
  defineAsyncComponent,
  defineComponent,
  onUnmounted,
  ref,
  Teleport,
  unref,
} from '@vue/runtime-core';
import { Divider, Modal } from 'ant-design-vue';
import { prayerComponentMap, PreyersType } from './components/prayers';
import { appStore } from '/@/store/modules/app';
import { isProdMode } from '/@/utils/env';

interface modalType {
  setProps: (arg: { compname: string; comptitle: string }) => void;
  show: () => void;
}

const modalRef = ref<modalType | null>(null);

export function registerModal(instance: any) {
  isProdMode() &&
    onUnmounted(() => {
      modalRef.value = null;
    });
  modalRef.value = instance;
}

const projectSetting = computed(() => {
  return appStore.getProjectSetting;
});
export function renderFaith() {
  const title = '信经';
  switch (unref(projectSetting).showFaith) {
    case 0:
      const faith = defineAsyncComponent(() => import(`./components/faith.vue`));
      return (
        <>
          <div>
            <div class="text-sm text-center">{title}</div>
            <div class="mb-md">
              <faith />
            </div>
          </div>
        </>
      );
      break;
    case 1:
      return renderModalPrayer(title, 'faith');
      break;
    case 2:
      return '';
      break;
    default:
      return '';
  }
}

export function renderFather(title: string = '天主经一遍') {
  switch (unref(projectSetting).showFather) {
    case 0:
      return renderPrayer('father', title);
      break;
    case 1:
      return renderModalPrayer(title, 'father');
      break;
    case 2:
      return '';
      break;
    default:
      return '';
  }
}

export function renderMary(title: string = '圣母经十遍') {
  switch (unref(projectSetting).showMary) {
    case 0:
      return renderPrayer('mary', title);
      break;
    case 1:
      return renderModalPrayer(title, 'mary');
      break;
    case 2:
      return '';
      break;
    default:
      return '';
  }
}

export function renderGlory(title: string = '圣三光荣颂一遍') {
  switch (unref(projectSetting).showGlory) {
    case 0:
      return renderPrayer('glory', title);
      break;
    case 1:
      return renderModalPrayer(title, 'glory');
      break;
    case 2:
      return '';
      break;
    default:
      return '';
  }
}

export function renderQueen(title: string = '又圣母经一遍') {
  switch (unref(projectSetting).showQueen) {
    case 0:
      return renderPrayer('queen', title);
      break;
    case 1:
      return renderModalPrayer(title, 'queen');
      break;
    case 2:
      return '';
      break;
    default:
      return '';
  }
}

function renderModalPrayer(title: string, compname: string) {
  function show(event: MouseEvent) {
    const { setProps, show } = unref(modalRef) as modalType;
    setProps({ compname, comptitle: title });
    show();

    event.stopPropagation();
  }

  return (
    <>
      <div onClick={show}>
        <div class="text-sm text-center">
          {title}
          <i class="icon"></i>
        </div>
      </div>
    </>
  );
}

function renderPrayer(component: PreyersType, title: string) {
  // const comp = defineAsyncComponent(() => import(`./components/${component}.vue`));
  const Comp = prayerComponentMap.get(component) as typeof defineComponent;

  return (
    <>
      <div>
        <div class="text-sm text-center">{title} </div>
        <div class="mb-md">
          <Comp />
        </div>
      </div>
    </>
  );
}
